<script type="text/ng-template" id="interaction/ImageClickInput">
  <div ng-if="!imageUrl">
    [Select an image to display]
  </div>

  <div style="position: relative;" ng-if="imageUrl">
    <img ng-src="<[imageUrl]>"
         class="oppia-image-click-img"
         ng-click="onClickImage($event)"
         ng-mousemove="onMousemoveImage($event)"
         style="cursor: pointer; display: block; margin-left: auto; margin-right: auto;">
    <div ng-if="highlightRegionsOnHover">
      <div ng-repeat="region in allRegions"
           style="
             height: <[getRegionDimensions($index).height]>px;
             width: <[getRegionDimensions($index).width]>px;
             left: <[getRegionDimensions($index).left]>px;
             top: <[getRegionDimensions($index).top]>px;
             pointer-events: none;
             position: absolute;
             display: <[getRegionDisplay(region.label)]>;
             background: rgba(0,0,255,0.5);
             z-index: 999;">
      </div>
    </div>
  </div>
</script>

<script type="text/ng-template" id="response/ImageClickInput">
  <div ng-mouseover="onMouseoverDiv($event)"
    ng-mouseout="onMouseoutDiv($event)"
    ng-mousemove="onMousemoveDiv($event)">
    (Clicks on image)
  </div>
</script>
